<template>
  <div style="padding-bottom:70px;">
    <div v-title>代理商认证</div>
    <div class="box">
      <div class="title">
        <div>基本资料
          <span>（信息提交后将无法修改）</span>
        </div>
      </div>
      <div>
        <van-cell-group>
          <van-field v-model="names" label="真实姓名" icon="clear" placeholder="请输入真实姓名" @click-icon="names = ''" />
          <van-field v-model="Phones" label="手机号码" icon="clear" placeholder="请输入手机号码" @click-icon="Phones = ''" />
          <van-field v-model="IDnum" label="身份证号" icon="clear" placeholder="请输入身份证号" @click-icon="IDnum = ''" />
          <van-cell is-link style="padding: 0px 15px 0px 0px;" @click="showA=true">
            <van-field label="所在省市" placeholder="请选择所在省市" :value="changeAddressA" disabled/>
          </van-cell>
          <van-field v-model="detaileds" icon="clear" placeholder="请输入具体街道门牌号" @click-icon="detaileds = ''" class="aa" />
        </van-cell-group>
      </div>
    </div>
    <div class="box">
      <div class="title">
        <div>常用银行卡
          <span>（确保是本人名下的银行储蓄卡）</span>
        </div>
      </div>
      <div>
        <van-cell-group>
          <van-field v-model="Bankname" label="银行名称" icon="clear" placeholder="请输入银行名称" @click-icon="Bankname = ''" />
          <van-cell is-link style="padding: 0px 15px 0px 0px;" @click="showB=true">
            <van-field label="所在省市" placeholder="请选择所在省市" :value="changeAddressB" disabled/>
          </van-cell>
          <van-field v-model="Branchname" label="支行名称" icon="clear" placeholder="请输入支行名称" @click-icon="Branchname = ''" />
          <van-field v-model="Banknum" label="银行卡号" icon="clear" placeholder="请输入银行卡号" @click-icon="Banknum = ''" />
        </van-cell-group>
      </div>
    </div>
    <div class="box">
      <div class="title">
        <div>本人身份证照片
          <span>（上传照片要求字迹清晰）</span>
        </div>
      </div>
      <div>
        <div class="photo">
          <div style="overflow: hidden;position:relative">
            <Up @imgbase="Uone" style="width:48%;float:left;">
            </Up>
            <span class="imgone" v-show="imgone">上传身份证正面照片</span>
            <Up @imgbase="Utwo" style="width:48%;float:right;">
            </Up>
            <span class="imgtwo" v-show="imgtwo">上传身份证反面照片</span>
          </div>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div class="kf" @click="phone">
        <a class="iconfont icon-kefu"></a>
        <p>客服</p>
      </div>
      <div class="next" @click="next()">
        确认提交
      </div>
    </div>
    <van-popup position="bottom" v-model="showA">
      <van-area :columns-num="2" :area-list="areaList" @confirm="confirmA" @cancel="cancel" />
    </van-popup>
    <van-popup position="bottom" v-model="showB">
      <van-area :columns-num="2" :area-list="areaList" @confirm="confirmB" @cancel="cancel" />
    </van-popup>
  </div>
</template>
<script>
import api from '../fetch/api.js';
import Address from '../js/addressData.json'
import upload from '../components/loadImgs.vue'
import {
  Uploader,
  Field,
  Cell,
  CellGroup,
  Area,
  Popup,
  Toast,
  Loading
} from 'vant';
export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Uploader.name]: Uploader,
    [Field.name]: Field,
    [Area.name]: Area,
    [Popup.name]: Popup,
    [Toast.name]: Toast,
    [Loading.name]: Loading,
    'Up': upload,
  },
  data() {
    return {
      //省市选择
      showA: false,
      showB: false,
      areaList: Address.arealist,
      changeAddressA: '',
      changeAddressB: '',
      //
      names: '',
      Phones: '',
      IDnum: '',
      detaileds: '',
      Bankname: '',
      Branchname: '',
      Banknum: '',
      //自定义
      UpImg1: 'http://upfile.nbbaijin.com/upload/20180427/4a3afd4342c347fb9911af63caa8012c.jpg',
      UpImg2: 'http://upfile.nbbaijin.com/upload/20180427/5d3d329dda564861bdb6004402997e39.jpg',
      Img1: '',
      Img2: '',
      QuoteInfor: '',
      twice: false,
      imgone: true,
      imgtwo: true,
      //省市
      provinceIDA: '',
      cityIDA: '',
      userprovinceA: '',
      usercityA: '',
      provinceIDB: '',
      cityIDB: '',
      userprovinceB: '',
      usercityB: '',
    }
  },
  methods: {
    next() {
      let data = {
        MemberName: this.names,
        Phone: this.Phones,
        IDNumber: this.IDnum,
        ProvinceID: this.provinceIDA,
        CityID: this.cityIDA,
        ProvinceName: this.userprovinceA,
        CityName: this.usercityA,
        DetailedAddress: this.detaileds,
        BankName: this.Bankname,
        CardProvinceID: this.provinceIDB,
        CardCityID: this.cityIDB,
        CardProvinceName: this.userprovinceB,
        CardCityName: this.usercityB,
        BranchName: this.Branchname,
        CardNumber: this.Banknum,
        IDFrontPhoto: this.Img1,
        IDAfterPhoto: this.Img2,
      }
      // console.log(data)
      if (this.names == '') {
        Toast.fail('请填写真实姓名');
        return;
      }
      if (this.Phones == '') {
        Toast.fail('请填写手机号码');
        return;
      }
      if (this.IDnum == '') {
        Toast.fail('请填写身份证号');
        return;
      }
      if (this.changeAddressA == '') {
        Toast.fail('请选择现居住地所在省市');
        return;
      }
      if (this.Bankname == '') {
        Toast.fail('请填写银行名称');
        return;
      }
      if (this.changeAddressB == '') {
        Toast.fail('请选择支行所在省市');
        return;
      }
      if (this.Branchname == '') {
        Toast.fail('请填写支行名称');
        return;
      }
      if (this.Banknum == '') {
        Toast.fail('请填写银行卡号');
        return;
      }
      if (this.Img1 == '' || this.Img2 == '') {
        Toast.fail('请检查照片是否上传完整');
        return;
      }
      api.Post('Member/MemberInfo/AddCertification', data).then(res => {
        if (res.Success == true) {
          Toast.success(res.Msg);
          this.$router.push('/BaiFenCenter')
        } else {
          Toast.fail(res.Msg);
        }
      })
    },
    //图片上传
    Uone(s) {
      this.UpImg1 = s
      this.Img1 = s
      this.imgone = false
    },
    Utwo(s) {
      this.UpImg2 = s
      this.Img2 = s
      this.imgtwo = false
    },
    //省市区选择
    confirmA(Num) {
      for (var i = 0; i < Num.length; i++) {
        if (Num[i].code == -1) {
          Toast.fail('请正确选择省市！');
          return;
        }
      }
      this.provinceIDA = Num[0].code.substr(0, 2)
      this.cityIDA = Num[1].code.substr(2, 3)
      this.userprovinceA = Num[0].name
      this.usercityA = Num[1].name
      this.changeAddressA = Num[0].name + Num[1].name
      this.showA = false;
    },
    //省市区选择
    confirmB(Num) {
      for (var i = 0; i < Num.length; i++) {
        if (Num[i].code == -1) {
          Toast.fail('请正确选择省市！');
          return;
        }
      }
      this.provinceIDB = Num[0].code.substr(0, 2)
      this.cityIDB = Num[1].code.substr(2, 3)
      this.userprovinceB = Num[0].name
      this.usercityB = Num[1].name
      this.changeAddressB = Num[0].name + Num[1].name
      this.showB = false;
    },
    cancel() {
      this.showA = false;
      this.showB = false;
    },
    phone() {
      window.location.href = "tel:400-170-1235";
    }
  }
}

</script>
<style>
input {
  text-align: right;
}

.aa:last-child input {
  text-align: left !important;
}
</style>

<style scoped>
.box {
  width: 94%;
  overflow: hidden;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
}

.title {
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.title div {
  border-left: 3px solid #2491ff;
  padding-left: 7px;
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.title span {
  font-size: 12px;
  color: #f33e16;
  font-weight: 400;
}

.check {
  padding: 10px 0;
  margin: 0 10px;
  color: #333;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.check h4 {
  margin: 0;
  font-weight: normal;
}

.check p {
  margin: 0;
  color: #999;
  font-size: 12px;
}

.check span {
  position: absolute;
  right: 0;
  top: 20px;
  color: #333;
  font-size: 14px;
}

.info {
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin: 0 10px;
}

.info p {
  margin: 0;
  padding: 10px 0 0 0;
  font-size: 14px;
  color: #333;
}

.photo {
  margin: 0 10px;
  padding: 15px 0px;
}


.photo img {
  width: 42vw;
  height: 28vw;
  border-radius: 3px;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  background: #fff;
  height: 50px;
  border-top: 1px solid #eee;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 999;
}

.kf {
  width: 20%;
  float: left;
  border-right: 1px solid #eee;
  margin-right: -1px;
  text-align: center;
}

.kf a {
  color: #2491ff;
  font-size: 24px;
  margin-top: 5px;
  display: block;
}

.kf p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.next {
  width: 80%;
  float: right;
  line-height: 55px;
  background: #2491ff;
  color: #fff;
  text-align: center;
  font-size: 16px;
}

.ctm {
  width: 94%;
  overflow: hidden;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  border-radius: 3px;
  font-size: 14px;
}

.ctm h4 {
  color: #999;
  font-weight: inherit;
  margin: 5px 10px;
  font-size: 14px;
}

.ctm p {
  margin: 5px 10px;
  color: #333;
}

.ctm span {
  float: right;
}

.imgone {
  position: absolute;
  z-index: 100;
  left: 8%;
  font-size: 12px;
  top: 60%;
  color: #666;
}

.imgtwo {
  position: absolute;
  z-index: 999;
  left: 60%;
  font-size: 12px;
  top: 60%;
  color: #666;
}
</style>
<style>
.van-checkbox__control:checked+.van-icon-success {
  border-color: #2491ff;
  background-color: #2491ff;
}
</style>
<style src="../css/iconfont.css"></style>
